<template>
  <div class="w-full">
    <template v-if="option === 'input'">
      <a-input v-model="modelValue" size="small" allow-clear v-bind="$attrs">
        <template v-for="(slot, slotName) in $slots" #[slotName]>
          <slot :name="slotName" />
        </template>
      </a-input>
    </template>
    <template v-if="option === 'number'">
      <a-input-number v-model="modelValue" size="small" v-bind="$attrs">
        <template v-for="(slot, slotName) in $slots" #[slotName]>
          <slot :name="slotName" />
        </template>
      </a-input-number>
    </template>
    <template v-if="option === 'icon'">
      <xiri-icon v-model="modelValue" />
    </template>
    <template v-if="option === 'color'">
      <div class="flex gap-1 align-center">
        <a-input v-model="modelValue" size="mini" v-bind="$attrs" allow-clear class="w-[80px]" />
        <a-popover title="选择颜色" trigger="click" position="left">
          <a-button type="text"><icon-pen /></a-button>
          <template #content>
            <a-button type="text" v-if="isSupported" @click="open" class="bi-sip-line" size="mini" style="width: 5px" />
            <a-color-picker
              hideTrigger
              size="mini"
              format="rgb"
              show-preset
              v-model="modelValue"
              :historyColors="recentColors"
              @change="recentColorsChange"
            />
          </template>
        </a-popover>
      </div>
    </template>
    <template v-if="option === 'linearColor'">
      <div class="flex gap-1 align-center">
        <a-input v-model="modelValue" size="mini" v-bind="$attrs" allow-clear style="width: 100px">
          <template #prefix>
            <span class="py-2 px-2.5" :style="`background:${modelValue}`" />
          </template>
        </a-input>
        <a-popover trigger="click" position="left" @popupVisibleChange="popupVisibleChange">
          <a-button type="text"><icon-pen /></a-button>
          <template #content>
            <a-radio-group v-model="positionColor" type="button">
              <a-radio :value="1">单色</a-radio>
              <a-radio :value="2">渐变</a-radio>
            </a-radio-group>
            <template v-if="positionColor === 1">
              <a-color-picker
                hideTrigger
                size="mini"
                format="rgb"
                show-preset
                v-model="linearColor1"
                @change="recentColorsChange"
              />
            </template>
            <template v-else>
              <div class="flex gap-3 items-center h-[35px]">
                <div style="border-radius: 5px" :style="`background: ${modelValue};height:20px;`" class="w-full" />
                <a-input-number
                  @change="recentColorsChange(linearColorDeg)"
                  v-model="linearColorDeg"
                  style="width: 70px"
                >
                  <template #suffix>°</template>
                </a-input-number>
              </div>
              <div class="flex gap-4">
                <div>
                  <a-color-picker
                    hideTrigger
                    size="mini"
                    format="rgb"
                    show-preset
                    v-model="linearColor1"
                    @change="recentColorsChange"
                  />
                </div>
                <div>
                  <a-color-picker
                    hideTrigger
                    size="mini"
                    v-model="linearColor2"
                    format="rgb"
                    show-preset
                    @change="recentColorsChange"
                  />
                </div>
              </div>
            </template>
          </template>
        </a-popover>
      </div>
    </template>
    <template v-if="option === 'switch'">
      <a-switch v-model="modelValue" size="small" v-bind="$attrs" />
    </template>
    <template v-if="option === 'select'">
      <a-select v-model="modelValue" size="small" v-bind="$attrs">
        <a-option v-for="item in $attrs.optionList" :key="item.value" :value="item.value">{{ item.label }}</a-option>
      </a-select>
    </template>
    <template v-if="option === 'img'">
      <xiri-form v-model="modelValue" />
      <div class="upload flex flex-wrap">
        <!--        <a-image :src="modelValue" :width="150" :height="100" fit="contain" />-->
        <ma-upload v-model="modelValue" />
        <ma-resource-button v-model="modelValue" :multiple="false" />
        <a-button size="mini" type="outline" @click="modelValue = ''"> 清除 </a-button>
      </div>
    </template>
    <template v-if="option === 'imageChoose'">
      <a-popover trigger="click" position="left" :content-style="{ width: '700px', height: '80vh', overflow: 'auto' }">
        <a-button size="mini" variant="outline"> 选择图片 </a-button>
        <template #content>
          <a-tabs default-active-key="1" justify destroy-on-hide>
            <a-tab-pane key="1" title="背景">
              <div class="grid grid-cols-5" style="width: 100%; overflow: auto; flex-wrap: wrap">
                <div
                  v-for="item in 19"
                  :key="item.value"
                  class="p-5 cursor-pointer"
                  :class="modelValue === item.value ? 'active' : ''"
                  @click="modelValue = `/images/bg/bg${item}.png`"
                >
                  <a-image :preview="false" :width="100" :height="50" :src="`/images/bg/bg${item}.png`" />
                  <div style="flex: 1">背景{{ item }}</div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" title="边框">
              <div class="grid grid-cols-5" style="width: 100%; overflow: auto; flex-wrap: wrap">
                <div
                  v-for="item in 50"
                  :key="item.value"
                  class="p-5 cursor-pointer"
                  :class="modelValue === item.value ? 'active' : ''"
                  @click="modelValue = `/images/box/box${item}.png`"
                >
                  <a-image :preview="false" :width="100" :height="50" :src="`/images/box/box${item}.png`" />
                  <div style="flex: 1">背景{{ item }}</div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" title="头部">
              <div class="grid grid-cols-5" style="width: 100%; overflow: auto; flex-wrap: wrap">
                <div
                  v-for="item in 20"
                  :key="item.value"
                  class="p-5 cursor-pointer"
                  :class="modelValue === item.value ? 'active' : ''"
                  @click="modelValue = `/images/header/header${item}.png`"
                >
                  <a-image
                    :preview="false"
                    :width="100"
                    :height="50"
                    fit="contain"
                    :src="`/images/header/header${item}.png`"
                  />
                  <div style="flex: 1">背景{{ item }}</div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="4" title="装饰">
              <div class="grid grid-cols-5" style="width: 100%; overflow: auto; flex-wrap: wrap">
                <div
                  v-for="item in 50"
                  :key="item.value"
                  class="p-5 cursor-pointer"
                  :class="modelValue === item.value ? 'active' : ''"
                  @click="modelValue = `/images/decoration/gif${item}.${item < 11 ? 'gif' : 'png'}`"
                >
                  <a-image
                    :preview="false"
                    :width="100"
                    :height="50"
                    fit="contain"
                    :src="`/images/decoration/gif${item}.${item < 11 ? 'gif' : 'png'}`"
                  />
                  <div style="flex: 1">背景{{ item }}</div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="5" title="挂件">
              <div class="grid grid-cols-5" style="width: 100%; overflow: auto; flex-wrap: wrap">
                <div
                  v-for="item in 16"
                  :key="item.value"
                  class="p-5 cursor-pointer"
                  :class="modelValue === item.value ? 'active' : ''"
                  @click="modelValue = `/images/widget/widget${item}.png`"
                >
                  <a-image
                    :preview="false"
                    :width="100"
                    :height="50"
                    fit="contain"
                    :src="`/images/widget/widget${item}.png`"
                  />
                  <div style="flex: 1">背景{{ item }}</div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="6" title="自定义">
              <div style="height: 600px">
                <ma-resource v-model="modelValue" />
              </div>
            </a-tab-pane>
          </a-tabs>
        </template>
      </a-popover>
    </template>
    <template v-if="option === 'boxChoose'">
      <a-popover trigger="click" placement="left" show-arrow destroy-on-close style="height: 400px">
        <a-input v-model="modelValue" size="small" clearable auto-width />
        <a-space align="center" size="2px">
          <a-image v-if="modelValue" :src="modelValue" fit="fill" style="width: 100px; height: 50px">
            选择边框
          </a-image>
          <a-button size="small" variant="base"> 选择边框 </a-button>
        </a-space>
        <template #content>
          <div class="grid grid-cols-5" style="width: 600px; height: 300px; overflow: auto; flex-wrap: wrap">
            <div
              v-for="item in 50"
              :key="item.value"
              class="p-5 cursor-pointer"
              :class="modelValue === item.value ? 'active' : ''"
              @click="modelValue = `/images/box/box${item}.png`"
            >
              <a-image style="width: 100px; height: 50px" :src="`/images/box/box${item}.png`" />
              <div style="flex: 1">背景{{ item }}</div>
            </div>
          </div>
        </template>
      </a-popover>
    </template>
    <template v-if="option === 'themeChoose'">
      <a-button size="mini" type="outline" @click="toggle()">
        <span v-if="modelValue">
          {{ currThemeName(modelValue) }}主题
          <span @click.stop="modelValue = ''" class="cursor-pointer">X</span>
        </span>
        <span v-else>请选择主题</span>
      </a-button>
      <a-drawer
        :visible="value"
        :width="640"
        @ok="toggle()"
        @cancel="toggle()"
        unmountOnClose
        :footer="false"
        :closable="false"
      >
        <div
          v-for="item in chartThemeList"
          :key="item.value"
          class="flex justify-between m-2 cursor-pointer"
          :class="modelValue === item.value ? 'active' : ''"
          @click="modelValue = item.value"
        >
          <div style="width: 400px" class="flex items-center">
            <div
              v-for="color in item.colors"
              :key="color"
              style="width: 100px; height: 20px"
              :style="`background:${color}`"
            />
          </div>
          <div class="flex-1">{{ item.label }}</div>
        </div>
      </a-drawer>
    </template>
    <template v-if="option === 'fontChoose'">
      <a-select v-model="modelValue" size="small" allow-clear>
        <a-option v-for="item in fonts" :key="item.name" :label="item.name" :value="item.value">
          <span :style="`font-family:${item.value}`">{{ item.name }}</span>
        </a-option>
      </a-select>
    </template>
    <template v-if="option === 'file'">
      <div class="upload">
        <ma-upload
          ref="uploadRef"
          theme="file-input"
          accept=".xlsx,.xls,.csv"
          placeholder="自定义上传方法需要返回成功或失败信息"
        />
      </div>
    </template>
    <slot />
  </div>
</template>

<script setup>
// 吸色器
import { useEyeDropper, useToggle } from "@vueuse/core"
import xiriIcon from "./xiriIcon/index.vue"
import { useEchartsTheme } from "@/components/echarts/useChartTheme.js"
import fonts from "@/utils/fonts"
import { gradientColor } from "@/utils/util.js"

const [value, toggle] = useToggle()
const { chartThemeList, currThemeName } = useEchartsTheme()
const modelValue = defineModel({
  default: ""
})
/*
 * modelValue: 绑定的值
 * option: input：输入框 number：数字 icon：图标 color：颜色选择器 switch：开关 img：上传图片 themeChoose：主题选择 fontChoose：字体选择
 */
const props = defineProps({
  option: {
    type: String, // input number icon color switch img themeChoose
    default: "input"
  },
  // 图片上传的配置
  isImageChoose: {
    type: Boolean,
    default: true
  }
})

const positionColor = ref(1)
const linearColor1 = ref("")
const linearColor2 = ref("")
const linearColorDeg = ref(45)

const popupVisibleChange = (val) => {
  if (props.option === "linearColor" && val) {
    if (modelValue.value.includes("linear-gradient")) {
      const gradientColorArr = gradientColor(modelValue.value)
      linearColor1.value = gradientColorArr[0]
      linearColor2.value = gradientColorArr[1]
      linearColorDeg.value = gradientColorArr[2]
    }
  }
}

const { isSupported, open, sRGBHex } = useEyeDropper()
watch(sRGBHex, (val) => {
  modelValue.value = val
})

// 最近使用的颜色
const recentColors = ref(localStorage.getItem("recentColors") ? JSON.parse(localStorage.getItem("recentColors")) : [])
// 最多显示12个
recentColors.value = recentColors.value.slice(0, 22)
// 最近使用的颜色变化change
const recentColorsChange = (val) => {
  if (props.option === "linearColor") {
    if (positionColor.value === 1) {
      linearColor2.value = val
    }
    modelValue.value = `linear-gradient(${linearColorDeg.value}deg, ${linearColor1.value} 0%, ${linearColor2.value})`
  } else {
    modelValue.value = val
  }
}
</script>

<style scoped lang="less">
.upload {
  position: relative;
  margin-top: 5px;
  .mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: all 0.3s;
    z-index: 2;
    background-color: var(--td-mask-disabled);
    text-align: center;
  }
  &:hover {
    .mark {
      opacity: 1;
    }
  }
}
</style>
